import { Dropdown, Menu, Button } from "antd"
import { DownOutlined } from '@ant-design/icons'
import PropTypes from "prop-types"


const CommonTotalAction = ({
  btns,
  selectedRowKeys,
  onAction,
  onCancel
}) => {

  const handleMenuClick = (e) => {
    onAction(e.key)
  }

  const menu = (
    <Menu onClick={handleMenuClick}>
      {btns.map(el => <Menu.Item key={el.key}>{el.name}</Menu.Item>)}
    </Menu>
  );

  return <>
    <Dropdown
      overlay={menu}
      trigger={['click']}
      disabled={selectedRowKeys.length === 0}
    >
      <Button>批量操作 <DownOutlined /></Button>
    </Dropdown>
    {
      selectedRowKeys.length > 0 && <>
        <span> 已选中：<b>{selectedRowKeys.length}</b> 项</span>
        <Button
          type="link"
          onClick={onCancel}
        >取消选中</Button>
      </>
    }
  </>
}

CommonTotalAction.propTypes = {
  btns: PropTypes.array.isRequired,
  selectedRowKeys: PropTypes.array,
  onAction: PropTypes.func,
  onCancel: PropTypes.func
}

export default CommonTotalAction